<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: #f00;
        }
    </style>
</head>

<body>

    <div></div>

    <script>

        // 鼠标事件
        //    click   单击事件
        //    dblclick  双击事件(左键双击)
        //    mousedown  鼠标按下
        //    mouseup    鼠标抬起
        //    mousemove  鼠标移动
        //    mouseover  鼠标进来
        //    mouseout   鼠标出去

        //    wheel   滚轮事件


        document.ondblclick = function () {
            console.log('双击666')
        }

        var oDiv = document.querySelector('div');

        oDiv.onmousedown = function () {
            console.log('鼠标按下');
        }

        oDiv.onmouseup = function () {
            console.log('鼠标抬起');
        }

        // 鼠标按下并抬起
        oDiv.onclick = function () {
            console.log('click');
        }


        oDiv.onmousemove = function () {
            console.log('move')
            this.style.backgroundColor = randColor();
        }


        oDiv.onmouseover = function () {
            console.log('over进来')
        }
        oDiv.onmouseout = function () {
            console.log('out出去')
        }

        // 图片预览
        oDiv.onwheel = function () {
            // 如何判断滚轮的上下
            console.log('滚轮')
        }


        // 随机颜色
        // #123456   6位数 0-9 a-f
        function randColor() {
            var r = parseInt(Math.random() * 256);
            var g = parseInt(Math.random() * 256);
            var b = parseInt(Math.random() * 256);
            // rgb(2,2,2)

            return `rgb(${r},${g},${b})`
        }

    </script>

</body>

</html>